@import "base/mixin";

/*变量*/
$header-height: 50px;
$layout-header-background: #48576a;
$layout-header-color: #eef1f6;
$level-bar-background: #eef1f6;

/*头部组件样式*/
.layout-header{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: $header-height;
    color: $layout-header-color;
    background-color: $layout-header-background;
    box-shadow: 0 0 3px rgba(0, 0, 0,.5);
}

/*侧边栏组件样式*/
.layout-sidebar{
    transition: width 0.28s ease-out;
    width: 200px;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    background: #324157;
    padding-top: $header-height;
    box-sizing: border-box;
    &::-webkit-scrollbar {
        display: none
    }
    .el-menu{
        width: 100% !important;
        height: 100%;
        border-radius: 0;
    }
}

/*正文内容组件样式*/
.layout-content{
    position: relative;
    top: $header-height;

    min-height: 100%;
    transition: margin-left 0.28s ease-out;
    margin-left: 200px;
    color: #1f2d3d;
    .content-header {
        height: 50px;
        line-height: 50px;
        padding: 0 10px;
        background: $level-bar-background;
    }
    section.content-wrapper{
        padding: 20px;
        min-height: 100%
    }
    .filter-container {
        padding-bottom: 10px;
        .filter-item {
            display: inline-block;
            vertical-align: middle;
            margin-bottom: 10px;
        }
    }
    .pagination-container {
        margin-top: 30px;
    }
}

